screen modes - full screen

                    <div id="frame">
                        <p>How to run in full screen? </p>
                        <button onclick="toggleFullscreen()">
                            <svg width="30" height="30">
                              <path
                                id="enter-fullscreen"
                                stroke="black"
                                stroke-width="3"
                                fill="none"
                                d="
                                  M 10, 2 L 2,2 L 2, 10
                                  M 20, 2 L 28,2 L 28, 10
                                  M 28, 20 L 28,28 L 20, 28
                                  M 10, 28 L 2,28 L 2, 20"
                              />
                              <path
                                id="exit-fullscreen"
                                stroke="transparent"
                                stroke-width="3"
                                fill="none"
                                d="
                                  M 10, 2 L 10,10 L 2, 10
                                  M 20, 2 L 20,10 L 28, 10
                                  M 28, 20 L 20,20 L 20, 28
                                  M 10, 28 L 10,20 L 2, 20"
                              />
                            </svg>
                        </button>
                    </div>
                    <style>
                        #frame {font-family: Montserrat; margin: 3vw; max-width: 40vw; height: 40vw;}
                        button {all: unset; cursor: pointer; }
                        @media (display-mode: fullscreen) {
                            #frame { background-color: #f9bb86;  font-size: 1.2em;}
                        }
                    </style>
                    <script>
                        const enterFullscreen = document.getElementById("enter-fullscreen");
                        const exitFullscreen = document.getElementById("exit-fullscreen");
        
                        function toggleFullscreen() {
                            if (!document.fullscreenElement) {
                                document.documentElement.requestFullscreen();
                                enterFullscreen.setAttribute("stroke", "transparent");
                                exitFullscreen.setAttribute("stroke", "black");
                            } else {
                                document.exitFullscreen();
                                enterFullscreen.setAttribute("stroke", "black");
                                exitFullscreen.setAttribute("stroke", "transparent");
                            }
                        }
                        window.addEventListener("resize", () => {
                            // Resize canvas element
                            canvas.width = window.innerWidth;
                            canvas.height = window.innerHeight;
        
                            // Update scaling
                            // . . .
        
                            // Adjust size dependent properties
                            // . . .
        
                            if (!document.fullscreenElement) {
                                // Specific logic for entering full screen
                                // . . .
                        }
        
                            // Redraw canvas
                            draw();
                        });
                                        
                    </script>
                

                    <div class="element">
                        <h3>fullscreen pseudo-class demo</h3>
                        <p class="spec"> This demo uses the <code>:fullscreen</code> pseudo-class to 
                        automatically change the background color of the <code>.element</code> div.</p>
                        <p class="spec">Normally, the background is light yellow. In fullscreen mode, 
                        the background is light pink.</p>
                        <button class="toggle">Toggle Fullscreen</button>
                    </div>
                    <style>
                        .element {background-color: lightyellow;}
                        .element:fullscreen {background-color: lightpink;}
                        .toggle{margin: 2vw; padding: 1vw;border: 0.2vw solid blue;}
                    </style>
                    <script>
                        document.querySelector(".toggle").addEventListener("click", function (event) {
                            if (document.fullscreenElement) {
                                document.exitFullscreen();
                                return;
                            }
                            document.querySelector(".element").requestFullscreen();
                        });
                    </script>
                

                    <div class="one">
                        <p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. 
                        Close it by either clicking the "Esc" key on your keyboard, or with the 
                        "Close Fullscreen" button.</p>
                        <button onclick="openFullscreen();">Open Fullscreen</button>
                        <button onclick="closeFullscreen();">Close Fullscreen</button>
                    </div>
                    <style>
                        :fullscreen {background-color: yellow; z-index: 1111;}
                        .one button { padding: 1vw;  font-size: 1vw; border: 0.2vw dashed blue; background-color: orange;           }
                    </style>
                    <script>
                        const elem = document.documentElement;
                        function openFullscreen() {
                            if (elem.requestFullscreen) {
                                elem.requestFullscreen();
                            }
                        }
                        
                        function closeFullscreen() {
                            if (document.exitFullscreen) {
                                document.exitFullscreen();
                            }
                        }
                    </script>
                

                    <div class="container">
                        <p>When the image goes to fullscreen mode to preserve its aspect ratio, 
                        it won't fill the whole screen therefore a background might appear. <br> 
                        Using :fullscreen pseudo-class selector we can control the background and other styles:</p>
                        <button>Toggle fullscreen</button>
                        <img src="../images/2.jpg" alt="">
                    </div>
                    <style>
                        img {display: block; max-width: 100%; margin: 2rem 0;}
                        img:fullscreen {background: url("../imags/2.jpg") 0 0/40px;}
                        .container * {box-sizing: border-box;}
                        body {margin: 0; font: 100%/1.7 system-ui;  background-color: #1b1b1b;  color: #eee;}
                        .container {max-width: 72rem; margin: 0 auto; padding: 2rem;}
                        .container p{color: black;}
                        .container > button {-webkit-tap-highlight-color: transparent; box-sizing: border-box; font-family: inherit; 
                            display: inline-block; text-align: center;  user-select: none;  border: 0.2vw solid #007bff; 
                            padding: .375rem .75rem;  font-size: 1rem; line-height: 1.5;
                        border-radius: .25rem; color: #fff; background-color: green; cursor: pointer; }
                    </style>
                    <script>
                        let fullscreen = document.querySelector("img");
                        let button = document.querySelector(".container button");
                        button.addEventListener("click", () => {
                            if (!document.fullscreenElement) {
                                fullscreen?.requestFullscreen();
                            } else {
                                document.exitFullscreen();
                            }
                        });
                    </script>
                

   
                    <div id="fullscreen">
                        <button id="but">toggle requestFullscreen</button>
                    </div>
                    <style>
                        #fullscreen:fullscreen{ background-color: skyblue;}
                        #fullscreen:-webkit-full-screen{ background-color: yellow;}
                        #fullscreen:-moz-full-screen{ background-color: yellow;}
                        #fullscreen button{display: block; width: 13vw; height: 3vw; color: green; 
                            background-color: skyblue; border: 0.2vw solid red; margin: 0 auto; padding: 0.5vw 0.5vw;}
                        #fullscreen::backdrop{background-color: red;}
                    </style>
                    <script>
                        let fullScreen = document.querySelector('#fullscreen');
                        let but = document.querySelector("#but");
                        but.addEventListener("click", () => {
                            if(!document.fullscreenElement){
                                fullScreen.requestFullscreen();
                            } else{
                                document.exitFullscreen();
                            }
                        });
                        
                    </script>
                

                <div id="root">
                    <div class="title">This will not go fullscreen</div>
                    <div id="full_screen">
                      <div class="title">This will go fullscreen</div>
                      <button id="button_">Toggle Fullscreen</button>
                    </div>
                </div>
                <style>
                    button_ {border: none; padding: 8px 16px; background-color: #264653; color: 
                        white; cursor: pointer;}
                    #root {position: relative; width: 600px; font-size: 24px; height: 400px; 
                        background-color: #e9c46a; display: flex; flex-direction: column; 
                        justify-content: center; align-items: center;}
                    #full_screen {position: relative;  width: 400px; height: 200px; display: 
                        flex; flex-direction: column; justify-content: center;
                    align-items: center; background-color: #e76f51;}
                    #full_screen:fullscreen {/*  background-color: yellow; */}
                    #full_screen::backdrop {background-color: transparent;}
                    #root:fullscreen > #button_ { background-color: green; border: none;}
                    .title {position: absolute; bottom: 40px; font-family: roboto; 
                        text-transform: uppercase; color: #264653; }
                </style>
                <script>
                    let full_screen = document.querySelector("#full_screen");
                    let button_ = document.querySelector("#button_");
                    button_.addEventListener("click", () => {
                        if (!document.fullscreenElement) {
                            full_screen?.requestFullscreen();
                        } else {
                            document.exitFullscreen();
                        }
                    });
                </script>